<template>
    <div class="house_page">
        <div class="types">
            <div class="type_item" 
                @click="selectType(i)"
                :class="{active: actTypeId == i.id}"
                v-for="(i, idx) in showTypeList" :key="idx">
                {{i.groupName}}
            </div>

            <div class="edit_type" @click="$navigate.to('/pages/admin/house/types')">编辑分类</div>
        </div>

        <scroll-view class="list_container" @scrolltolower="onInfinite" scroll-y>
            <div class="img_list">
                <div class="img_item" v-for="(item, index) in materialList" :key="index">
                    <image @click="previewImg(item)" :src="item.fileUrl" mode="aspectFit" />
                    <template v-if="isSelect">
                        <div v-if="hasSelected(item)" @click="selectFn(item)" class="selecting">
                            <em class="select_icon"></em>
                        </div>
                        <em class="select_icon" @click="selectFn(item)" v-else></em>
                    </template>
                    <i v-else @click="delMaterial(item)" class="delete icon-close"></i>
                </div>

                <div class="wfull">
                    <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
                </div>
            </div>
            <div v-if="isSelect" class="add_material" @click="selectConfirm()">确定</div>
            <div v-else class="add_material" @click="addNewMaterial('open')">+新增素材</div>
        </scroll-view>

        <pub-lo-popup 
            title="新增素材" 
            ref="addMaterial" 
            type="center" 
            @cancel="addNewMaterial('cancel')"
            @confirm="addNewMaterial('confirm')"
            showCancel>
            <div class="pad-b30">
                <div class="cell mar-b20">
                    <div class="cell_item">
                        <span>分类</span>
                        <div class="value">
                            <picker mode="selector" :range="typeList" range-key="groupName" @change="typeChange">
                                <div class="more flex-v-center" style="justify-content: flex-end;">
                                    <span>{{addNew.houseGroupName}}</span>
                                    <i class="fs20 color-999 mar-l10 icon-arrow-bottom-triangle-solid"></i>
                                </div>
                            </picker>
                        </div>
                    </div>
                </div>
                <div>
                    <pub-upload-img 
                        width="180rpx" 
                        height="180rpx" 
                        :limit="9"
                        v-model="addNew.materialUrlList"></pub-upload-img>
                </div>
                
            </div>
        </pub-lo-popup>
    </div>
</template>

<script>
import { getHouseGroups, getHouseFiles, batchAddUserHouseFile, deleteHouseFiles } from '@/request/house'
export default {
    name: "",
    components: {},
    data() {
        return {
            isSelect: false,
            selectList: [],
            limit: 9,

            actTypeId: '',
            typeList: [],

            materialList: [],
            scroll: {
                page: 1,
                size: 14,
                loading: false,
                max: false,
                noData: false,
            },
            addNew: {
                houseGroupName: '',
                houseGroupId: '',
                materialUrlList: []
            }
            
        }   
    },
    computed: {
        showTypeList() {
            return [
                {
                    groupName: '全部',
                    id: ''
                },
                ...this.typeList
            ]
        }
    },
    onLoad({ isSelect, limit }) {
        if(isSelect) this.isSelect = true;
        if(limit) this.limit = +limit;
        this.getTypeList()
        this.onRefresh()
    },
    onReachBottom() {
        console.log('1111');
    },
    methods: {
        selectType(i) {
            this.actTypeId = i.id
            this.onRefresh()
        },
        getTypeList() {
            getHouseGroups().then(res => {
                this.typeList = res.data
            })
        },
        getImgList(complete) {
            getHouseFiles({
                fileType: '00', //00 图片 ， 01视频
                houseGroupId: this.actTypeId,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                if(this.scroll.page == 1) {
                    this.materialList = res.data.list
                } else {
                    this.materialList = this.materialList.concat(res.data.list)
                }
                this.scroll.max = this.materialList.length >= res.data.total
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getImgList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getImgList(() => {
                this.scroll.loading = false
            })
        },
        typeChange(e) {
            let index  = e.target.value
            this.addNew.houseGroupId = this.typeList[index].id
            this.addNew.houseGroupName = this.typeList[index].groupName

        },
        async delMaterial(item) {
            let action = await this.$interact.modal({
                title: '提示',
                content: '是否删除图片？',
                showCancel: true
            })
            if(!action.confirm) return;
            deleteHouseFiles({
                fileIds: item.id,
                delStatus: '01'
            }).then(res => {
                this.$interact.toast(res.msg)
                this.onRefresh()
            })

        },
        addNewMaterial(type) {
            if(type == 'open') {   
                this.$refs.addMaterial.open()
                this.addNew.houseGroupId = this.actTypeId || ''
                if(this.actTypeId) {
                    this.addNew.houseGroupName = this.typeList.find(i => i.id == this.actTypeId).groupName
                } else {
                    this.addNew.houseGroupName = ''
                }
            } else if(type  == 'cancel') {
                this.$refs.addMaterial.close()
            } else if(type  == 'confirm') {
                if(!this.addNew.materialUrlList.length) return this.$interact.toast('请上传图片')
                if(!this.addNew.houseGroupId) return this.$interact.toast('请选择分类')
                batchAddUserHouseFile({
                    fileType: '00',
                    houseGroupId: this.addNew.houseGroupId,
                    fileUrls: this.addNew.materialUrlList.join(',')
                }).then(res => {
                    this.getImgList()
                    this.addNewMaterial('cancel')
                })

            }
        },
        previewImg(item) {
            uni.previewImage({
                current: item.fileUrl,
                urls: this.materialList.map(i => i.fileUrl)
            })
        },
        hasSelected(item) {
            return this.selectList.some(i => i.id == item.id)
        },
        selectFn(item) {
            let index = this.selectList.findIndex(i => i.id == item.id)
            if(this.limit == 1) {
                this.selectList = [item]
                return
            }
            if(index > -1) {
                this.selectList.splice(index, 1)
            } else {
                if(this.selectList.length >= this.limit) return
                this.selectList.push(item)
            }
        },
        selectConfirm() {
            console.log(this.selectList);
            if(this.$prePage()) this.$prePage().selectFromMaterial(this.selectList);
            this.$navigate.back()
        }
    }
}
</script>
<style lang="less" scoped>
    @import "~@/styles/cell.less";

    .house_page{
        width: 100%;
        height: 100%;
        display: flex;
        background: #fff;
        .types{
            width: 220rpx;
            height: 100%;
            background: #f1f1f1;
            overflow: auto;
            padding-bottom: 30rpx;
            .type_item{
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                padding-left: 20rpx;
                font-size: 28rpx;
                &.active{
                    color: @mainColor;
                    background: #fff;
                    position: relative;
                    &::before{
                        content: "";
                        width: 8rpx;
                        height: 50rpx;
                        top: 15rpx;
                        left: 0;
                        background: @mainColor;
                        position: absolute;
                        border-radius: 5rpx;
                    }
                }
            }
            .edit_type {
                font-size: 24rpx;
                border-radius: 50rpx;
                line-height: 50rpx;
                text-align: center;
                width: 140rpx;
                margin: 20rpx auto;
                border: 1px solid @mainColor;
                color: @mainColor;

            }
        }
    }

.list_container{
    flex: 1;
    height: 100%;
    width: 0;
    
    .img_list{
        width: 100%;
        padding: 20rpx 30rpx 20rpx;
        overflow: auto; 
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
        .img_item{
            width: 225rpx;
            height: 225rpx;
            margin-bottom: 20rpx;
            position: relative;
            image{
                width: 100%;
                height: 100%;
                background: #ccc;
            }
            .delete{
                width: 50rpx;
                height: 50rpx;
                position: absolute;
                right: 10rpx;
                top: 10rpx;
                border-radius: 50%;
                color: red;
                background: rgba(230, 205, 205, 0.5);
                backdrop-filter: blur(5px);
                font-size: 28rpx;
                .align(center);
            }

            .selecting{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                background: rgba(0, 0, 0, 0.25);
                .select_icon {
                    background: #244ae0;
                }
            }

            .select_icon{
                width: 50rpx;
                height: 50rpx;
                position: absolute;
                top: 10rpx;
                right: 10rpx;
                border: 3rpx solid #fff;
                background: rgba(0, 0, 0, 0.25);
                border-radius: 50%;
                z-index: 100;
            }
        }
    }
    .add_material{
        width: 400rpx;
        height: 70rpx;
        font-size: 30rpx;
        border-radius: 70rpx;
        line-height: 70rpx;
        text-align: center;
        margin: 20rpx auto;
        background: @mainColor;
        color: #fff;
        position: sticky;
        bottom: 20rpx;
        z-index: 100;
    }
}

</style>